<template>
    <div class="home-container">
         <!-- 导航栏 -->
        <van-nav-bar class="app-nav-bar">
            <van-button 
            slot="title"
            class="search-btn"
            icon="search"
            type="info"
            round
            to="/search"
            >搜索</van-button>
        </van-nav-bar>
        <!-- 导航栏 -->

        <!-- 文章频道列表 -->
        <van-tabs class="channel-tabs" v-model="active">
          <van-tab
           :title="channel.name"
           v-for="channel in channels"
           :key="channel.id"
           >
           <!-- 文章列表 -->
           <article-list :channel="channel"/>
           <!-- /文章列表 -->
           </van-tab>

           <!-- 占位元素 -->
           <div
             slot="nav-right"
             class="wap-nav-placeholder"
           ></div>

           <!-- 汉堡菜单 -->
           <div
             slot="nav-right"
             @click="isChannelEditShow = true"
             class="wap-nav-wrap"
           >
               <van-icon name="wap-nav" />
           </div>
        </van-tabs>
        <!-- /文章频道列表 -->

        <!-- 弹窗层 -->
        <van-popup
          v-model="isChannelEditShow"
          position="bottom"
          class="channel-edit-popup"
          closeable
          close-icon-position="top-left"
          get-container="body"
          style="height: 100%"
        >
        <!-- 
            模板中的 $event 表示事件参数
            @update-active="active = $event"
         -->
        <channel-edit
          :user-channel="channels"
          :active="active"
          @close="isChannelEditShow = false"
          @update-active="onUpdateActive"
        />
        </van-popup>
    </div>
</template>

<script>
import { getUserChannels } from '@/api/user'
import ArticleList from './components/article-list.vue'
import ChannelEdit from './components/channel-edit.vue'
import { mapState } from 'vuex'
import { getItem } from '@/utils/storage'

export default {
    name: 'HomeIndex',
    components: {
        ArticleList,
        ChannelEdit
    },
    props: {},
    data () {
        return {
            active: 0, //控制被激活的标签
            channels: [], //频道列表
            isChannelEditShow: false //控制编辑频道的显示状态
        }
    },
    computed: {
        ...mapState(['user'])
    },
    watch: {},
    created () {
        this.loadChannels()
    },
    mounted () {},
    methods: {
        async loadChannels() {
            let channels = []
            if (this.user) {
                // 已登录，请求获取线上的用户频道列表数据
                const { data } = await getUserChannels()
                channels = data.data.channels
            }else {
                // 没有登陆，判断是否有本地存储的频道列表数据
                const localChannels = getItem('user-channels')

                // 如果有本地存储的频道列表则使用
                if (localChannels) {
                    channels = localChannels
                } else {
                    // 用户没有登录，也没有本地存储的频道，那就请求获取默认推荐的频道列表
                    const { data } = await getUserChannels()
                    channels = data.data.channels
                }
            }

            // 把处理好的数据放到 data 中以供模板使用
            this.channels = channels
            //请求获取频道数据
            // const { data } = await getUserChannels()
            // this.channels = data.data.channels
        },
        onUpdateActive (index) {
            this.active = index
        }
    }
}
</script>

<style scoped>
.search-btn{
    width: 277px;
    height: 32px;
    background: #5babfb;
    border: none;
}
 /deep/ .van-nav-bar__title{
    max-width: none;
}
.van-icon{
    color: #fff;
    font-size: 16px;
}
.van-button__text{
    font-size: 14px;
}
/deep/.van-tab{
    border-right: 1px solid #edeff3;
    border-bottom: 1px solid #edeff3;
}
.van-icon{
    color: black;
}
.wap-nav-wrap{
    position: fixed;
    right: 0;
    width: 33px;
    height: 43px;
    background-color: #fff;
    opacity: .9;
    display: flex;
    justify-content: center;
    align-items: center;
}
.wap-nav-wrap i{
    font-size: 24px;
}
.wap-nav-placeholder{
    width: 33px;
    flex-shrink: 0;
    border-bottom: 1px solid #edeff3;
}
</style>